<template>
  <div class="tab-box setPadTop">
    <splitLine :note="categoriesTitle"></splitLine>
    <sub-nav>
      <router-link tag="div" :to="item.url" v-for="item in toUrl" :key="item.id" class="sub-nav-to" >
        <img class="sub-nav-to-img" :src="item.imageUrl" alt="loading" style="width: 60%;">
        <p style="color: #877a73; font-size: .32rem; margin: 0;">{{item.title}}</p>
      </router-link>
    </sub-nav>
    <splitLine note="大家都在逛"></splitLine>
    <div class="cart-content" >
      <ul class="cart-list">
        <cart-item v-for="(item,index) in cartHomeList" :key="item.commodityId + '-' + index"
        :img="item.image"
        :title="item.title"
        :price="item.price"
        :num="item.saleNum"
        :id="item.id"
        :weight="item.couponValue"
        :free-postage="item.isFreePostage"
        :platform="item.platform"
        ></cart-item>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import splitLine from '@/components/SplitLine'
import subNav from '@/components/SubNav'
import cartItem from '@/components/CartItem'
import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast)
export default {
  mounted () {
    this.getHomeAction(this.$route.params.tabid)
  },
  updated () {
    Toast.clear()
  },
  beforeMount () {
    Toast.loading({
      message: '加载中...',
      forbidClick: true,
      overlay: true, // 是否显示背景遮罩层
      duration: 0 // 不会消失
    })
  },
  methods: {
    ...mapActions('homedata', ['getHomeAction'])
  },
  computed: {
    ...mapState('homedata', ['categoriesTitle', 'categories', 'cartHomeList']),
    toUrl () {
      return this.categories && this.categories.map(item => {
        if (item.url.includes('column')) {
          item.url = '/column/' + item.url.split('=')[1]
        } else {
          item.url = '/category/' + item.url.split('=')[1]
        }
        return item
      })
    }
  },
  components: {
    splitLine,
    subNav,
    cartItem
  }
}
</script>
<style lang="scss" scoped>

</style>
